<script setup>
import { ref,defineProps,defineEmits } from 'vue';
import dropDownList from './dropDownList.vue';
import inputVue from './input.vue'
let props=defineProps({
    data:{
        required:true
    },
    modelValue:{
        required:true
    },
    placeholder:{
        type:String
    }
})
let emits=defineEmits(['update:modelValue'])

let dropDowm=ref(null)
let selected=ref('')

//初始化赋值
for (const key in props.data) {
    if (Object.hasOwnProperty.call(props.data, key)) {
        const value = props.data[key];
        if(key==props.modelValue){
            selected.value=value
            emits('update:modelValue',key)
            break;
        }
    }
}

function select(key,value){
    emits('update:modelValue',key)
    selected.value=value
    dropDowm.value.show()
}
function openSelectDownList(e){
    dropDowm.value.show(e)
}
</script>

<template>
    <div>
        <div class="selectBox"  @click="openSelectDownList($event)">
            <inputVue type="select" v-model="selected" @update:modelValue="()=>{}" :placeholder="props.placeholder">
                 
            </inputVue>
            <div class="mask"></div>
            <i >&#xe8a4;</i> 
        </div>
        <dropDownList ref="dropDowm">
            <template v-for="(value,key) in props.data" :key="key">
                <div class="selectItem" @click="select(key,value)" :style="(selected==value?'color:var(--color-theme)':'')">
                    {{ value }}
                </div>
            </template>
        </dropDownList>
    </div>
</template>

<style scoped>
.selectBox{
    position: relative;
    display: inline-block;
    border-radius: .5em;
    cursor: pointer;
}
.selectBox>i{
    position: absolute;
    right: .5em;
    top: 50%;
    user-select: none;
    cursor: pointer;
    color: var(--color-text-third);
}
.selectItem{
    padding: .2em .5em;
    border-radius: .2em;
}
.selectItem:hover{
    background-color: var(--color-theme);
    color: var(--color-text-light-first) !important;
}
.mask{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
</style>